﻿<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!---

焦点需位于body

-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    
    <style type="text/css">
    
    
    #div1
    {
        position:absolute;
        left:0px;
        top:0px;
        bottom:0px;
        right:0px;
        background-image:url(Images/bg2.jpg);
        z-index:-1;
        background-repeat:no-repeat;
    }
    #div2
    {
        position:absolute;
        left:0px;
        top:0px;
        bottom:0px;
        right:0px;
        background-image:url(Images/cloud.png);
         background-repeat:no-repeat;
        z-index:1;
    }
    
    #div3
    {
        position:absolute;
        left:0px;
        top:0px;
        bottom:0px;
        right:0px;
        background-image:url(Images/airplane.png);
         background-repeat:no-repeat;
        z-index:2;
    }
    
    
    #divAction
    {
        position:absolute;
        left:0px;
        top:0px;
        bottom:0px;
        right:0px;
    }
    
    </style>

    <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        var startX = 0
        var startY = 0;
        var cloudX = 0;
        var AirplaneY = 0;
        
        $(function() {
            document.getElementById("divAction").onmouseenter = divAction_entry;
            document.getElementById("divAction").onmouseleave = divActive_leave;

        });

        function divAction_move() {

            var valueX = (window.event.clientX - startX);
            var valueY = (window.event.clientY - startY);
            document.getElementById("div2").style.left = cloudX + valueX / 2;

            document.getElementById("div3").style.top = AirplaneY + valueY /3
                       
           // debugger;
        }
        function divAction_entry() {
            startX = window.event.clientX
            startY = window.event.clientY;

            cloudX = document.getElementById("div2").offsetLeft;
            AirplaneY = document.getElementById("div3").offsetTop;
            
            document.getElementById("divAction").onmousemove = divAction_move;
            
        }
        function divActive_leave() {
            document.getElementById("div2").style.left = "0px";
            document.getElementById("div3").style.top = "0px";

            document.getElementById("divAction").onmousemove = null;
        }
    
    </script>
    
   
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" id="txtX" />
    <input type="text" id="txtY" />
        <input type="text" id="txtMsg" />
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="divAction" style="z-index:100;"></div>
    </form>
</body>
</html>
